<template>
  <div>
    <base-layout :visibleContent2="true">
      <template #searchPanel>
        <el-form :inline="true" :model="fromdata" label-width="110px">
          <el-row>
            <el-col :span="12">服务领料基础信息</el-col>
          </el-row>
          <el-divider content-position="center"></el-divider>
          <el-row>
            <el-col :span="6">
              <el-form-item label="工单编号:">
                <div>{{ fromdata.code }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="客户姓名:">
                <div>{{ fromdata.clientName }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="客户电话:">
                <div>{{ fromdata.phone }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="车票号:">
                <div>{{ fromdata.licensePlateNumber }}</div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="车型:">
                <div>{{ fromdata.carModelName }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="接车时间:">
                <div>{{ fromdata.receiveCarTime }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="预计交车:">
                <div>{{ fromdata.predictDeliveryTime }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="状态:">
                <div>{{ fromdata.status }}</div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
      <template #contentPanel>
        <el-row>
          <el-col :span="12">工单项目</el-col>
        </el-row>
        <el-divider content-position="center"></el-divider>
        <el-row>
          <data-table
            :value="workTable"
            :total-count="totalCount"
            :table-column-attributes="workColumnAttributes"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :width="160"
          >
          </data-table>
        </el-row>
      </template>
      <template #contentPanel2>
        <el-row>
          <el-col :span="12">领料配件</el-col>
        </el-row>
        <el-divider content-position="center"></el-divider>
        <el-row>
          <data-table
            :value="tableData"
            :total-count="totalCount"
            :table-column-attributes="tableColumnAttributes"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :width="160"
          >
          </data-table>
        </el-row>
      </template>
    </base-layout>
  </div>
</template>

<script>
import baseMixin from "@/mixins/base";
import { picking } from "@/api/after-sale/storehouseManage/outOfStockManage";

export default {
  props: {
    props: {
      id: Number,
    },
  },
  mixins: [
    baseMixin({
      format(res) {
        return res.map((data) => {
          return data;
        });
      },
    }),
  ],
  data() {
    return {
      dataTable: [],
      workTable: [],
      fromdata: {},
      workColumnAttributes: [
        { name: "项目名", value: "stockCode", type: "text" },
        { name: "项目介绍", value: "partsCode", type: "text" },
        { name: "项目工时", value: "partsName", type: "text" },
        { name: "项目类型", value: "partsType", type: "text" },
        { name: "项目所属配件", value: "partsUnit", type: "text" },
        { name: "项目金额", value: "storageSiteName", type: "text" },
      ], // 工单项目
      tableColumnAttributes: [
        { name: "配件编号", value: "partsCode", type: "text" },
        { name: "配件名称", value: "partsName", type: "text" },
        { name: "开单数量", value: "partsType", type: "text" },
        { name: "已领取数", value: "partsUnit", type: "text" },
        { name: "单位", value: "storageSiteName", type: "text" },
        { name: "采购成本", value: "purchasePrice", type: "text" },
        { name: "销售价", value: "storagePrice", type: "text" },
        { name: "出库价格", value: "purchasePrice", type: "text" },
        { name: "领料仓库", value: "status", type: "text" },
        { name: "领料仓位", value: "userName", type: "text" },
        { name: "库存剩余", value: "outTime", type: "text" },
        { name: "领料人", value: "outTime", type: "text" },
        { name: "领料时间", value: "outTime", type: "text" },
      ], // 领料列表
    };
  },
  async created() {
    let { data } = await picking(this.id);
    this.fromdata = data;
  },
};
</script>

<style lang="scss" scoped>
.el-table .delete-row {
  background: #f5f7fa;
  color: #ccc !important;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 80px;
  height: 80px;
  display: block;
}
</style>
